<template>
	<view class="page">
		<topVue title="社区详情" name="plus" @handle="$tools.route('./publish')"></topVue>
		<view class="avatarVue flex-between align-center padding30">
			<view class="flex align-center">
				<u-avatar src="https://jjscapp.oss-cn-beijing.aliyuncs.com/avatar/17408910309621740891026695_u=256816879,771155532&fm=253&app=120&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000.jpg" mode="circle" size="88"></u-avatar>
				<view class="flex-column padding-row20 flex-between" style="height: 72rpx;">
					<view class="name">绿色生活家</view>
					<view class="time">2小时前</view>
				</view>
			</view>
			<view class="fans">关注</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiperVue">
			<u-swiper :list="swiperList" height="400"></u-swiper>
		</view>
		<view class="infoVue padding30">
			<view class="title">这些环保购物袋不仅实用还很时尚</view>
			<view class="describ">今天给大家分享几款我最近发现的环保购物袋，这些设计不仅环保还特别时尚。日常购物使用既能为环保出一份力，还能展现个人品味。</view>
			<view class="flex">
				<text class="text" v-for="(item, index) in texts" :key="index">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				swiperList: [
					{
						image: "https://lvseshangcheng.oss-cn-beijing.aliyuncs.com/7829972af69929f41beae78bc8ada70ac392f184cfcb092605cde641cdc4de3a.png",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
					{
						image: "https://lvseshangcheng.oss-cn-beijing.aliyuncs.com/7829972af69929f41beae78bc8ada70ac392f184cfcb092605cde641cdc4de3a.png",
						title: "身无彩凤双飞翼，心有灵犀一点通",
					}
				],
				texts: ["#购物达人", "#可持续时尚", "#环保生活"]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.avatarVue {
		width: 100%;
		.name {
			font-weight: 600;
			line-height: 1;
		}
		.time {
			color: #4B5563;
			line-height: 1;
		}
		.fans {
			width: 100rpx;
			height: 62rpx;
			text-align: center;
			line-height: 62rpx;
			color: #fff;
			background: linear-gradient(to right, #1CC289, #60A5FA);
			border-radius: 30rpx;
		}
	}
	.swiperVue {
		width: 100%;
		height: 400rpx;
	}
	.infoVue {
		width: 100%;
		.title {
			font-weight: 600;
		}
		.describ {
			color: #4B5563;
			line-height: 36rpx;
			padding: 15rpx 0 30rpx 0;
		}
		.text {
			color: #1CC289;
			font-weight: 600;
			padding-right: 20rpx;
			line-height: 1;
		}
	}
</style>